<template>
	<view class="container">
		<view class="header">
			<text class="title">消防设施巡检信息</text>
		</view>
		<view class="content">
			<!-- 印章根据维保结果动态改变颜色 -->
			<view :class="['seal', sealClass]" style="color: black;">{{ data.stateName }}</view>
			<!-- 圆形水印/印章 -->
			<view class="watermark">
				<view class="watermark-text">
					山西瑞铭网络通信工程有限公司
				</view>
			</view>
			<view class="item" v-for="i in config">
				<text class="label">{{i.title}}:</text>
				<view v-if="i.key!=='informationPhoto'&&i.key!=='resultPhoto'">
					<text class="value" v-if="data[i.key]">{{data[i.key]}}</text>
					<text class="value" v-if="!(data[i.key])">空</text>
				</view>
				<view v-else>
					<view v-if="getUrl(data[i.key])==null">
						<view class="text">空</view>
					</view>
					<view v-else-if="getUrl(data[i.key]).type=='Array'" v-for="(url, index) in getUrl(data[i.key]).data"
						  style="display: inline-block;">
						<image :src="this.$baseUrl + url" alt="图" class="photoPreview"
							   @click="previewImage(getUrl(data[i.key]).data, index)" />
					</view>
					<view v-else>
						<image :src="this.$baseUrl + getUrl(data[i.key]).data" alt="点位图" class="photoPreview"
							   @click="previewImage([getUrl(data[i.key]).data], 0)"/>
					</view>
				</view>
			</view>
		</view>
		<CompileButton @click="navigateToPage"/>
	</view>
</template>

<script>
	import CompileButton from '@/common/component/CompileButton.vue';

	export default {
		components: {
			CompileButton
		},
		props: {
			config: {
				type: Array,
				default: [{
					title: '单位名称',
					key: 'clientName'
				},
					{
						title: '巡检人员',
						key: 'userName'
					},
					{
						title: '巡检地址',
						key: 'addrName'
					},
					{
						title: '巡检状态',
						key: 'stateName'
					},
					{
						title: '巡检电话',
						key: 'telephone'
					},
					{
						title: '巡检时间',
						key: 'dateTime'
					},
					{
						title: '巡检信息',
						key: 'information'
					},
					{
						title: '问题简述',
						key: 'hiddenDanger'
					},
					{
						title: '巡检图片',
						key: 'informationPhoto'
					},
					{
						title: '检查结果',
						key: 'result'
					},
					{
						title: '检查时间',
						key: 'resultTime'
					},
					{
						title: '检查图片',
						key: 'resultPhoto'
					},
					{
						title: '单位电话',
						key: 'clientTelephone'
					},
				]
			},
			data: {
				type: Object,
				default: {
					clientName: '',
					userName: '',
					addrName: '',
					dateTime: '',
					information: '',
					state: '',
					stateName: '',
					telephone: '',
					hiddenDanger: '',
					informationPhoto: '',
					result: '',
					resultTime: '',
					resultPhoto: '',
					clientTelephone: '',
				}
			}
		},
		data() {
			return {
				inspectionStr: '',
			}
		},
		onLoad(options) {
			this.inspectionStr = decodeURIComponent(options.inspection);
			const inspection = JSON.parse(this.inspectionStr);
			console.log(inspection)
			this.data.id = inspection.id;
			this.data.clientName = inspection.clientName;
			this.data.userName = inspection.userName;
			this.data.addrName = inspection.addrName;
			this.data.telephone = inspection.telephone;
			this.data.hiddenDanger = inspection.hiddenDanger;
			this.data.information = inspection.information;
			this.data.dateTime = inspection.dateTime;
			this.data.result = inspection.result;
			this.data.resultTime = inspection.resultTime;
			this.data.state = inspection.state;
			this.data.clientTelephone = inspection.clientTelephone;
			if (inspection.state === "0") {
				this.data.stateName = "无隐患";
			} else if (inspection.state === "1") {
				this.data.stateName = "有隐患";
			} else if (inspection.state === "2") {
				this.data.stateName = "已排除";
			}
			this.data.informationPhoto = inspection.informationPhoto;
			this.data.resultPhoto = inspection.resultPhoto;
		},
		computed: {
			// 根据维保结果计算印章的颜色
			sealClass() {
				switch (this.data.state) {
					case '0':
						return 'seal-success';
					case '1':
						return 'seal-fail';
					case '2':
						return 'seal-success';
					default:
						return 'seal-default'; // 默认颜色
				}
			}
		},
		methods: {
			previewImage(urls, currentIndex) {
				const images = urls.map(url => this.$baseUrl + url);

				// 使用 uni-app 的图片预览 API
				uni.previewImage({
					current: currentIndex, // 当前显示图片的索引
					urls: images, // 需要预览的图片链接列表
					indicator: 'number', // 显示指示器
					loop: true // 是否可循环播放
				});
			},
			getUrl(url){
				if(url==null){
					return null
				}
				const urlResult = {type:"String",data:""}
				if(url.includes(',')){
					const urlList = url.split(',')
					urlResult.type="Array"
					urlResult.data=urlList
					return urlResult
				}
				urlResult.data=url
				return urlResult
			},
			navigateToPage() {
				uni.navigateTo({
					url: '/pages/inspection/add?inspection=' + this.inspectionStr,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	@import url("@/common/globleCSS/photoPreview.css");
	.list {
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
	}

	.item {
		margin-bottom: 24px;
		display: flex;
		flex-direction: column; /* 垂直布局 */
	}

	/* 页面背景及容器 */
	.container {
		height: calc(100% - 40px);
		background: linear-gradient(135deg, #ff6b6b, #f9a8d4); /* 渐变背景 */
		display: flex;
		flex-direction: column; /* 垂直布局 */
		justify-content: center; /* 垂直居中 */
		align-items: center; /* 水平居中 */
		padding: 20px; /* 给容器加一些内边距 */
		overflow-y: auto;
		/* 开启滚动 */
	}

	/* 标题部分 */
	.header {
		text-align: center;
		margin-bottom: 20px; /* 调整标题与卡片之间的间距 */
	}

	.title {
		font-size: 26px;
		font-weight: bold;
		color: #fff;
	}

	/* 信息内容部分 */
	.content {
		background-color: #fff;
		width: 85%; /* 使内容宽度为父容器的 90% */
		max-width: 600px; /* 最大宽度限制 */
		padding: 30px;
		border-radius: 12px; /* 圆角 */
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		background: #fff; /* 背景颜色 */
		position: relative; /* 使印章可以定位到右上角 */
		overflow: hidden; /* 防止水印溢出 */
		overflow-y: auto;
	}

	/* 水印/印章的容器 */
	.watermark {
		position: absolute;
		top: 30%; /* 水印距离顶部的距离 */
		left: 50%; /* 水印水平居中 */
		transform: translateX(-50%); /* 水印水平居中 */
		width: 180px; /* 水印的宽度 */
		height: 180px; /* 水印的高度 */
		border-radius: 50%; /* 圆形 */
		border: 2px solid rgba(255, 0, 0, 0.5); /* 红色边框 */
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		opacity: 0.3; /* 设置水印的透明度 */
		pointer-events: none; /* 使水印不影响其他交互 */
		z-index: 1; /* 确保水印不遮挡其他内容 */
	}

	/* 文字环绕圆形边缘 */
	.watermark-text {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		text-align: center;
		transform-origin: center;
		font-size: 14px;
		color: rgba(255, 0, 0, 0.7);
		line-height: 1.5;
		font-weight: bold;
		transform: rotate(0deg);
		animation: rotateText 10s linear infinite; /* 文字旋转动画 */
	}

	/* 旋转文字的动画 */
	@keyframes rotateText {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	/* 动态印章样式 */
	.seal {
		position: absolute;
		top: 10px;
		right: 10px;
		color: white;
		font-weight: bold;
		padding: 10px 20px;
		border-radius: 50%; /* 圆形效果 */
		font-size: 14px;
		text-align: center;
		transform: rotate(-20deg); /* 使印章略微倾斜 */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
	}

	/* 根据不同维保结果的印章颜色 */
	.seal-success {
		background-color: #4caf50; /* 绿色 */
	}

	.seal-fail {
		background-color: #f44336; /* 红色 */
	}

	.seal-default {
		background-color: #9e9e9e; /* 默认灰色 */
	}

	/* 单项信息 */
	.item {
		margin-bottom: 24px;
		display: flex;
		flex-direction: column; /* 垂直布局 */
	}

	.label {
		font-size: 18px;
		font-weight: 600;
		color: #333;
		margin-bottom: 10px; /* 标签与内容的间距 */
	}

	.value {
		font-size: 16px;
		color: #555;
		line-height: 1.5; /* 增加行间距，使文字不显得拥挤 */
		word-break: break-word; /* 防止文字溢出 */
		padding: 10px;
		border-radius: 6px; /* 圆角效果 */
		background-color: #f9f9f9; /* 背景色稍微变浅 */
	}
</style>
